<template>
  <a-modal
    :title='title'
    :width='1000'
    :visible='visible'
    :confirmLoading='confirmLoading'
    :maskClosable='false'
    @ok='handleOk'
    @cancel='handleCancel'
  >
    <a-spin :spinning='confirmLoading'>
      <a-form :form='form'>
        <a-form-item
          :hidden='true'
          label='id'
          :labelCol='labelCol'
          :wrapperCol='wrapperCol'
        >
          <a-input
            v-decorator="['id']"
          />
        </a-form-item>
        <a-row :getter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='应用编码'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                placeholder='请输入应用编码'
                :disabled='editable || showable'
                v-decorator="['code', {rules: [{required: true, message: '请输入应用编码'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='应用名称'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                :disabled='showable'
                placeholder='请输入应用名称'
                v-decorator="['name', {rules: [{required: true, message: '请输入应用名称'}]}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :getter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='别名'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                placeholder='请输入别名'
                :disabled='showable'
                v-decorator="['alias', {rules: [{required: true, message: '请输入别名'}]}]" />
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='应用地址'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-input
                :disabled='showable'
                placeholder='请输入应用地址'
                v-decorator="['url', {rules: [{required: true, message: '请输入应用地址'}]}]" />
            </a-form-item>
          </a-col>

        </a-row>
        <a-row :getter='24'>
          <a-col :md='12' :sm='24'>
            <a-form-item
              label='状态'
              :labelCol='labelCol'
              :wrapperCol='wrapperCol'
            >
              <a-select
                placeholder='请选择状态'
                :disabled='showable'
                v-decorator="['status', {rules: [{required: true, message: '请选择状态'}],initialValue: '1'}]"
                :options='statusTypeList'
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md='12' :sm='24'>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>

</template>

<script>
import pick from 'lodash.pick'
import { addObj, getObj, putObj } from '@api/sys/app'
import { FormMixin } from '@/mixins/FormMixin'

export default {
  name: 'UserAddOrUpdate',
  mixins: [FormMixin],
  data() {
    return {
      statusTypeList: [
        {
          value: '1',
          title: '启用'
        },
        {
          value: '0',
          title: '禁用'
        }
      ],
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this)
    }
  },
  methods: {
    // 获取用户信息
    edit(id, type) {
      this.visible = true
      const { form: { setFieldsValue, resetFields } } = this
      resetFields()
      if (['edit', 'show'].includes(type)) {
        this.confirmLoading = true
        getObj(id).then(res => {
          const record = res.data
          this.$nextTick(() => {
            setFieldsValue(pick(record, ['id', 'code', 'name','alias','url','status']))
          })
        }).catch((err) => {
          this.$message.error(err.msg)
        }).finally(_ => {
          this.confirmLoading = false
        })
      }
    },
    // 结束保存用户信息
    handleOk() {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.confirmLoading = true
          try {
            if (this.type === 'add') {
              await addObj(values)
            } else if (this.type === 'edit') {
              await putObj(values)
            }
            this.form.resetFields()
            this.confirmLoading = false
            this.visible = false
            this.$emit('ok')
          } catch (e) {
            this.$message.error(e.msg)
            this.confirmLoading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
